<template>
  <a-drawer :title="$t('other.orderInfo')" placement="right" :visible="visible" @close="closeDraw" class="base-color-details" width="800">
    <div class='blue-line'>{{$t('hangManage.baseInfo')}}</div>
    <a-row :gutter="24">
      <a-col :span="6">
        <div>{{$t('basicData.orderNo')}}：</div>
        <div>{{detailInfo.orderNo}}</div>
      </a-col>
      <a-col :span="6">
        <div>{{$t('basicData.customer')}}：</div>
        <div>{{getText(props.customList, detailInfo.customId)}}</div>
      </a-col>
      <a-col :span="6">
        <div>{{$t('basicData.style')}}：</div>
        <div>{{detailInfo.style}}</div>
      </a-col>
      <a-col :span="6">
        <div>{{$t('basicData.totalPiece')}}：</div>
        <div>{{detailInfo.quantity}}</div>
      </a-col>
      <a-col :span="6">
        <div>{{$t('basicData.orderCreateDate')}}：</div>
        <div class="mb-20">{{formatTime(detailInfo.orderDate, 'YYYY-MM-DD')}}</div>
      </a-col>
      <a-col :span="6">
        <div>{{$t('basicData.PayDate')}}：</div>
        <div class="mb-20">{{formatTime(detailInfo.deliveryDate, 'YYYY-MM-DD')}}</div>
      </a-col>
      <a-col :span="6">
        <div>{{$t('common.createTime')}}：</div>
        <div class="mb-20">{{formatTime(detailInfo.createTime, 'YYYY-MM-DD HH:mm:ss')}}</div>
      </a-col>
      <a-col :span="6">
        <div>{{$t('common.updateTime')}}：</div>
        <div class="mb-20">{{formatTime(detailInfo.updateTime, 'YYYY-MM-DD HH:mm:ss')}}</div>
      </a-col>
    </a-row>
    <div class='blue-line mt-10'>{{$t('basicData.styleInfo')}}</div>
    <a-row :gutter="24" class="mb-20">
      <a-col :span="24">
        <div>{{$t('basicData.style')}}：</div>
        <a-table rowKey="id" bordered size="small" :dataSource="detailInfo.orderStyleList" :columns="columns" :pagination="false" />
      </a-col>
      <a-col :span="12">
        <div>{{$t('common.remark')}}：</div>
        <div>{{detailInfo.remark}}</div>
      </a-col>
    </a-row>
    <div class="footer">
      <a-button @click="closeDraw">{{$t('common.cancel')}}</a-button>
    </div>
  </a-drawer>
</template>
 
<script setup  name="orderManageDetails">
import { ref } from 'vue' 
import i18n from '@/locales/index'
import { formatTime, getText } from '@/utils' 
 const { t } = i18n.global
const props = defineProps({
  customList: {
    type: Array,
    default: () => [],
    require: true
  },
  styleList: {
    type: Array,
    default: () => [],
    require: true
  },
})
let detailInfo = ref({})
let visible = ref(false)
const columns = ref([  
  {
    title: t('common.sequenceNo'), dataIndex: 'index', key: 'index', align: 'center', width: 60,
    customRender: ({ index }) => {
      return index + 1
    }
  },
  {
    title: t('basicData.style'), dataIndex: 'styleId', key: 'styleId', align: 'center',
    customRender: ({ text }) => {
      return getText(props.styleList, text)
    }
  },
  { title: t('common.number'), dataIndex: 'quantity', key: 'quantity', align: 'right' },
])
const openDraw = (record) => {
  detailInfo.value = record
  visible.value = true
}

const closeDraw = () => {
  visible.value = false
}

defineExpose({
  openDraw
})
</script>